<template>
    <div class="header-box">
        <div class="block block-active">
            <div class="block-content row amount-box">
                <div class="box">
                    <div class="row align-start">
                        <div class="">
                            <div class="balance">
                                <span class="number">{{ balanceObj.accountBalance }}</span>
                            </div>
                            <div class="key align-items point" @click="
                                $router.push({
                                    path: '/insure/team/bill'
                                })
                                ">
                                账号余额(元)
                                <img class="leave-img" src="../assets/leave.png" alt="">
                            </div>
                        </div>
                        <button class="mini-btn recharge-btn" @click="isRecharge = true">充值</button>
                    </div>
                    <div>
                        <img class="img-chart" src="../assets/chart/team-chart-bar-blue.png" />
                    </div>
                </div>
                <div class="box">
                    <div class="row">
                        <div class="">
                            <div class="align-items balance">
                                <div class="number">{{ balanceObj.allEnsureCount }}</div>
                                <img v-if="balanceObj.escalating < 0" src="../assets/decline.png" class="decline-img"
                                    alt="" />
                                <img v-else src="../assets/increase.png" class="decline-img" alt="" />
                                <div :class="['font-base', balanceObj.escalating < 0 ? 'color-green' : 'color-red']">{{
                                    balanceObj.escalating }}% </div>
                            </div>
                            <div class="key align-items point" @click="
                                $router.push({
                                    path: '/insure/team/worker'
                                })">
                                当前在保人数(人)
                                <img class="leave-img" src="../assets/leave.png" alt="" />
                            </div>
                        </div>
                    </div>
                    <img class="img-chart-active" src="../assets/chart/team-chart-line-green.png" />
                </div>
            </div>
        </div>
        <div class="block block-content">
            <div class="block-header">
                <div class="block-title">便捷导航</div>
                <div class="block-more">
                    <!-- <div class="">查看详情</div> -->
                    <!-- <div class="triangle"></div> -->
                </div>
            </div>
            <div class="block-content row nav box box-active">
                <div class="nav-item point" @click="onAddCompany">
                    <img src="../assets/long-insure/dispatch.png" />
                    <div>添加派遣单位</div>
                </div>
                <!-- /long-insure-report -->
                <div class="nav-item point" @click="
                    $router.push({
                        path: '/insure-team-report'
                    })
                    ">
                    <img src="../assets/long-insure/report.png" />
                    <div>报案理赔</div>
                </div>
                <div class="nav-item point opacity">
                    <img src="../assets/long-insure/report.png" />
                    <div>报案理赔1</div>
                </div>
            </div>
        </div>
    </div>
    <div class="container block block-alone">
        <el-tabs model-value="detail">
            <div class="header">
                <div class="row header-info-box">
                    <div class="title">投保扣费记录</div>
                    <div class="insure-record">
                        <div class="record-i">
                            投保次数：
                            <span class="num">{{ insureCount.insureProjectCount }}</span>
                            次
                        </div>
                        <div class="record-i">
                            投保人次：
                            <span class="num">{{ insureCount.policyPeopleCount }}</span>
                            次
                        </div>
                        <div class="record-i">
                            费用总计：
                            <span class="num">{{ insureCount.amount || '0' }}</span>
                            元
                        </div>
                    </div>
                </div>
            </div>
            <div class="row screen-box">
                <div class="search">
                    <el-date-picker v-model="projectTime" type="daterange" class="date-solt point" unlink-panels
                        range-separator="至" start-placeholder="生效日期" end-placeholder="截止日期" format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD" style="width:241px;
                        margin-right:20px" />
                    <input type="text" placeholder="请输入派遣单位名称" class="input search-input" v-model="searchText"
                        @keydown.enter="search" />
                    <button class="btn" @click="search">搜索</button>
                    <button class="btn-white" @click="onReset">重置</button>
                </div>
                <div class="align-items">
                    <!-- <div v-if="isGsc">
                        <button class="btn-green" @click="isInsure = true">
                            <i class="el-icon el-icon-document-add" />
                            导入名单
                        </button>
                    </div> -->
                    <!-- <el-icon><delete /></el-icon> -->
                    <div class="search">
                        <!--                        <el-button class="btn-alone" @click="onExportDetail">-->
                        <!--                            <i class="el-icon el-icon-upload2" />导出明细-->
                        <!--                        </el-button>-->
                        <!--                        <button class="btn" @click="onExport">-->
                        <!--                            <i class="el-icon el-icon-upload2" />-->
                        <!--                            导出-->
                        <!--                        </button>-->
                        <export-button style="width: initial" @export="onExportDetail">导出明细</export-button>
                        <export-button @export="onExport"></export-button>
                    </div>
                </div>
            </div>
            <div class="table">
                <el-table :data="tableData" style="width: 100%" :header-cell-style="{ background: '#FBFBFD' }"
                    :header-row-style="{ color: '#202536' }" :row-style="{ color: '#5E617D' }"
                    @selection-change="handleSelectionChange">
                    <!-- <el-table-column type="selection" /> -->
                    <el-table-column type="index" label="序号" />
                    <el-table-column prop="serveCompanyName" label="派遣单位名" width="200px" />
                    <el-table-column prop="comboName" label="投保方案" />
                    <el-table-column prop="policyPeopleCount" label="人数" />
                    <el-table-column width="200px" prop="createTime" label="生效日期" />
                    <el-table-column prop="amount" label="保费" />
                    <el-table-column prop="insureRate" label="费率">
                        <template #default="scope" class="operation">
                            +{{
                                scope.row.insureRate * 100
                            }}%
                        </template>
                    </el-table-column>
                    <el-table-column prop="createPort" label="投保方式">
                        <template #default="scope" class="operation">
                            {{
                                scope.row.createPort === 1
                                    ? 'PC投保'
                                    : '手机投保'
                            }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope" class="operation">
                            <p style="color:#1989FA;float:left;" class="point" @click="
                                $router.push({
                                    path:
                                        '/insure/deduction/detail/' +
                                        scope.row.id
                                })
                                ">
                                查看详情
                            </p>
                            <p style="color:#1989FA;margin-left:65px" class="point"
                                @click="onSingleExport(scope.row.id)">
                                导出
                            </p>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination class="pagination" v-model:currentPage="pageNum" v-model:page-size="pageSize"
                    :page-sizes="[10, 30, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                    @size-change="handleSizeChange" @current-change="insureDeductionList">
                </el-pagination>
            </div>
        </el-tabs>
        <batch-insure-vue v-if="isInsure" @complete="insureComplete" @close="onCloseCallback" />
    </div>
    <!-- 不在提供 到达 insure-company 页面的方法  insure-company -->
    <div>
        <insureTeamCompany ref="teamCompany"></insureTeamCompany>
    </div>
    <popupRecharge :lockArr="['微信充值', '支付宝充值']" v-if="isRecharge" @close="isRecharge = false" useWay="InsureRechargeGsc"
        :openBank="openBank" :bankNo="bankNo" :bankName="bankName" @determine="isRecharge = false" dataTitle="团意保">
    </popupRecharge>
</template>
<script lang="ts">
import popupRecharge from '@/components/popup-recharge.vue'
import { defineComponent } from 'vue'
import insureTeamCompany from './insure-team-company.vue'
import {
    insureDeductionExport,
    insureDeductionDetailExport,
    insuranceDetailedExport
} from '@/api/export'
import store from '@/store/index'
import {
    insureDeduction,
    insureDeductionDetailListDto,
    insureChargeAccount,
    insureBalance
} from '@/api/insure-deduction'
import batchInsureVue from '@/components/batch-insure.vue'
import user from '@/utils/user'
import axios from 'axios'
import { downLoadFile } from '../utils/util'
export default defineComponent({
    name: 'TeamInsure',
    components: {
        batchInsureVue,
        insureTeamCompany,
        popupRecharge
    },
    data() {
        return {
            isRecharge: false,
            openBank: '',
            bankName: '',
            bankNo: '',
            projectTime: '',
            pageSize: 10,
            pageNum: 1,
            total: 0 as number,
            tableData: [] as insureDeductionDetailListDto[],
            searchText: '',
            selects: [] as string[],
            insureCount: {} as {
                amount: number
                insureProjectCount: number
                policyPeopleCount: number
            },
            isGsc: false,
            isInsure: false,
            balanceObj: {} as any
        }
    },
    async created() {
        user.waitLogin().then(() => {
            this.isGsc = user.isGsc
            this.openBank = '中国工商银行深圳市东门支行'
            this.bankName = '微民保险代理有限公司'
        })
        this.insureDeductionList()
        this.getInsureBalance()
        const result = await insureChargeAccount()
        this.bankNo = result
        console.log(result, '充值信息')
    },
    methods: {
        async getInsureBalance() {
            const result = await insureBalance({
                insureCompanyType: 'wesure004_rb'
            })
            this.balanceObj = result
        },
        onAddCompany() {
            let dialogVisible = '' as any
            dialogVisible = this.$refs.teamCompany
            dialogVisible.onAddCompany()
        },
        async insureDeductionList() {
            const result = await insureDeduction({
                beginCreateTime: this.projectTime ? this.projectTime[0] : '',
                endCreateTime: this.projectTime ? this.projectTime[1] : '',
                searchText: this.searchText,
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                insureCompanyType: 'wesure004_rb'
            })
            this.total = result.totalCount
            this.tableData = result.list
            this.insureCount = result.insureCount
        },
        handleSizeChange() {
            this.pageNum = 1
            this.insureDeductionList()
        },
        search() {
            this.pageNum = 1
            this.insureDeductionList()
        },
        onReset() {
            this.searchText = ''
            this.search()
        },
        handleSelectionChange(selects: { id: string }[]) {
            this.selects = selects.map(item => item.id)
            console.log(this.selects, 'selects')
        },
        /**
         * 导出勾选
         */
        async onExport() {
            console.log('导出了')
            const result = await insureDeductionExport({
                beginCreateTime: this.projectTime ? this.projectTime[0] : '',
                endCreateTime: this.projectTime ? this.projectTime[1] : '',
                searchText: this.searchText,
                insureCompanyType: 'wesure004_rb'
            }, {
                loading: true
            })
            if (!result.fileUrl && result.exportStatus === 0) {
                store.commit('getLongPollingFile', result)
            } else {
                axios({
                    url: result.fileUrl,
                    method: 'GET',
                    responseType: 'blob'
                }).then(async (response) => {
                    await downLoadFile(response, result.exportType, result.updateTime, result.remark)
                    await this.$message.success('导出成功！')
                })
            }
            // window.location.href =
            //     process.env.VUE_APP_BASE_URL +
            //     '/common/download?delete=true&fileName=' +
            //     result

            // this.$message.success('导出成功！')
        },
        async onSingleExport(id: string) {
            console.log(id, 'id', this.selects, 'selects')
            const result = await insureDeductionDetailExport({
                ids: this.selects.toString() || id
            })

            window.location.href =
                process.env.VUE_APP_BASE_URL +
                '/common/download?delete=true&fileName=' +
                result

            this.$message.success('导出成功！')
        },
        async onExportDetail() {
            const result = await insuranceDetailedExport({
                beginCreateTime: this.projectTime ? this.projectTime[0] : '',
                endCreateTime: this.projectTime ? this.projectTime[1] : '',
                searchText: this.searchText,
                insureCompanyType: 'wesure004_rb'
            }, {
                loading: true
            })
            if (!result.fileUrl && result.exportStatus === 0) {
                store.commit('getLongPollingFile', result)
            } else {
                axios({
                    url: result.fileUrl,
                    method: 'GET',
                    responseType: 'blob'
                }).then(async (response) => {
                    await downLoadFile(response, result.exportType, result.updateTime, result.remark)
                    await this.$message.success('导出成功！')
                })
            }
            // window.location.href =
            //     process.env.VUE_APP_BASE_URL +
            //     '/common/download?delete=true&fileName=' +
            //     result

            // this.$message.success('导出成功！')
        },
        insureComplete() {
            this.isInsure = false
            this.handleSizeChange()
        },
        onCloseCallback() {
            this.isInsure = false
        }
    }
})
</script>

<style lang="stylus" scoped>
table()
.amount-box
    display grid
    grid-template-columns repeat(2, 1fr)
    grid-gap 16px
.header-box
    display grid
    grid-template-columns repeat(3, 1fr)
    grid-gap 16px
    margin-top 24px
    .block
        padding 0
        width: 100%
        margin-top 0
        border 1px solid #DDE2FF
    .block-active
        grid-column-end: span 2;
    .block-header
        space-between(false)
        // border-bottom 1px solid #F7F8FC
    .block-title
        font-size font-small
        color black
        font-weight bold
        margin-bottom 24px
    .block-more
        display flex
        align-items center
        color color-blue
        .triangle
            margin-left 8px
            border-color color-blue transparent transparent transparent
            transform rotate(270deg)
            top 0
    .block-content
        // space-between()
        padding 24px
        .balance
            margin-bottom 8px
        .box
            background #FBFBFD
            padding 24px
            box-sizing border-box
            height 100%
            border-radius 8px
        .box-active
            height 127px
        .number
            color #202536
            font-size 28px
            font-weight bold
.screen-box
    margin-top 24px
.header.block{
    padding 20px
}
.header
    space-between()
.basic
    margin-top 20px
.value
    margin-right 30px

.value.important
    color color-red
    font-style italic
:deep().el-tabs__header.is-top
    display inline-block
    margin-top -20px
:deep().el-tabs__nav-scroll
    padding-right 20px
.download-btn
    width: 126px !important;
.btn-red
    background: #FF7E68
.el-tabs__header
    margin: 0
.block-alone
    padding: 0 24px 0
.header-info-box
    padding-bottom 16px
    box-sizing border-box
    border-bottom 1px solid #F4F4F7
    .title
        font-size 16px
        font-weight 600
        color #3D3D3D
.insure-record
    display flex
    color #202536
    font-size 16px
    .record-i
        margin-left 44px
    .num
        color #FF7E68
.search .btn-alone
    width 120px
    background #1989FA
    color #fff
.dispatch-icon
    width 16px
    height 16px
    margin-right 10px
.recharge-btn
    margin 0
.img-chart
    margin-top 24px
    width 100%
    height 25px
.img-chart-active
    width 100%
    height 58px
    margin 0
.leave-img
    width 14px
    height 14px
.decline-img
    width 16px
    height 16px
    margin 0 4px 0 8px
.nav-item
    display flex
    flex-direction column
    align-items center
</style>
